<template>
  <input type="text" v-model="inputs" @keyup.enter="addObj()" />
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "TodoListTop",
  data() {
    return {
      inputs: "",
    };
  },
  // props: ["re"],
  methods: {
    addObj() {
      if (this.inputs) {
        const obj = {
          id: nanoid(),
          title: this.inputs.trim(),
          done: false,
          isEdit: false,
        };
        //自定义事件re(全局事件总线)
        this.$bus.$emit("setDate", obj);
        this.inputs = "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
input {
  outline: none;
  width: 100%;
  height: 8%;
  border: none;
  border: 1px solid rgba($color: #000000, $alpha: 0.2);
  border-radius: 3px;
  font-size: 20px;
  transition: 0.3s;
  padding: 5px 5px;
  &:hover {
    border: 1px solid rgba($color: #000000, $alpha: 0.7);
  }
  &:focus {
    border: 1px solid rgba($color: #000000, $alpha: 0.7);
  }
}
</style>>
